import vue from 'vue';
import Router from 'vue-router';
import nullPage from '@/pages/Null';
import notFoundPage from '@/pages/exception/404';

/**
 * 路由中异步加载组件
 * @param {Promise} AsyncView
 * @return {*}
 */
function lazyLoadView (AsyncView) {
    const AsyncHandler = () => ({
        component: AsyncView,
        // 加载中替换的组件
        loading: nullPage,
        // 加载失败替换的组件
        error: nullPage,
        // 延迟展示，在200ms之内加载完成则不显示loading组件
        delay: 200,
        // 超时事件，默认无限
        // timeout: 1000,
    });
    return Promise.resolve({
        functional: true,
        render (h, {data, children}) {
            return h(AsyncHandler, data, children);
        },
    });
}

const Login = () => (lazyLoadView(import('@/pages/Login')));
const UserHome = () => (lazyLoadView(import('@/pages/user/ordinary/Home')));
const UserCalendar = () => (lazyLoadView(import('@/pages/user/ordinary/Calendar')));
const SingIn = () => (lazyLoadView(import('@/pages/SignIn')));
const Editing = () => (lazyLoadView(import('@/pages/user/admin/Editing')));
const Search = () =>(lazyLoadView(import('@/pages/Search')));
// const UserProfile = () => (lazyLoadView(import('@/pages/user/ordinary/Profile/')));
// const UserProfileRight = () => (lazyLoadView(import('@/pages/user/ordinary/Profile/sidebar')));
const EventDetail = () => (lazyLoadView(import('@/pages/event/Detail')));
const EventForm = () => (lazyLoadView(import('@/pages/form/')));
const EventEditor = () => (lazyLoadView(import('@/pages/event/EventEditor')));
const DashBoardHome = () => (lazyLoadView(import('@/pages/user/admin/Home')));
const UserMenu = () => (lazyLoadView(import('@/components/UserMenu')));
const EventInfoBar = () => (lazyLoadView(import('@/components/bar/EventInfoBar')));
// const EventSettingBar = ()=>(lazyLoadView(import('@/components/bar/EventSettingBar')));
const AdminHome = () => (lazyLoadView(import('@/pages/user/admin/Home')));
const Server = () => (lazyLoadView(import('@/pages/user/admin/Server')));
const Check = () => (lazyLoadView(import('@/pages/user/admin/Check')));
const FormList = () => (lazyLoadView(import('@/pages/event/FormList')));
const EventAdmin = () => (lazyLoadView(import('@/pages/event/EventAdmin')));
vue.use(Router);

const router = new Router({
    // mode: 'history',
    routes: [
        {
            path: '*',
            components: {
                default: notFoundPage,
                leftBar: UserMenu,
            },
        },
        {path: '/', redirect: '/home'},
        {
            path: '/home',
            components: {
                default: UserHome,
                leftBar: UserMenu,
            },
            props: {
                default: true,
            },
            meta: {keepAlive: true},
        },
        {
            path: '/signIn',
            component: SingIn,
        },
        {
            path: '/admin/home',
            components: {
                default: AdminHome,
                leftBar: UserMenu,
            },
        },
        {
            path: '/search/:s',
            props: {
                default: true,
            },
            components: {
                default: Search,
                leftBar: UserMenu,
            },

        },
        {
            path: '/admin/editing',
            components: {
                default: Editing,
                leftBar: UserMenu,
            },
        },
        {
            path: '/admin/check',
            components: {
                default: Check,
                leftBar: UserMenu,
            },
        },
        {
            path: '/formList',
            children: [
                {
                    path: ':formId',
                    props: true,
                    component: EventForm,
                },
            ],
            components: {
                default: FormList,
                leftBar: EventInfoBar,
            },
        },
        {
            path: '/event/admin/:eventId',
            props: {
                default: true,
            },
            components: {
                default: EventAdmin,
                leftBar: UserMenu,
            },
        },
        {
            path: '/admin/server',
            components: {
                default: Server,
                leftBar: UserMenu,
            },
        },
        {
            path: '/calendar',
            components: {
                default: UserCalendar,
                leftBar: UserMenu,
            },
        },
        {
            path: '/event/:eventId',
            components: {
                default: EventDetail,
                leftBar: UserMenu,
                rightBar: EventInfoBar,
            },
            props: {
                default: true,
            },
        },
        {
            path: '/eventForm/:formId',
            props: {
                default: true,
            },
            components: {
                default: EventForm,
                leftBar: UserMenu,
            },
        },
        {path: '/login', component: Login},
        {path: '/eventEditor', component: EventEditor},
        {path: '/dashBordHome', component: DashBoardHome},

    ],
    linkActiveClass: 'active',
});

router.beforeEach(async (to, from, next) => {
    if (to.fullPath === '/login') {
        return next();
    }
    const userData = await router.app.$store.getters.getToken;
    // 没有登陆
    if (!userData) {
        console.log('当前用户没有登陆，跳转到登陆页');
        return next('/login');
    }
    // 已登陆
    router.app.$store.dispatch('updateUserFormList').then();
    next();
});

export default router;
